<template>
  <div class="get-share-container">
    <div class="header">
      <div class="logo">
        <img src="@/assets/logo.png" alt="云忆匣logo" class="logo-image">
        <span class="logo-text">云忆匣</span>
      </div>
    </div>

    <div class="share-card">
      <div class="share-info">
        <img :src="shareInfo.qqAvatar" alt="分享者头像" class="avatar">
        <div class="info-text">
          <p class="nickname">{{ shareInfo.nickName }}</p>
          <p class="expire-time">过期时间: {{ formatExpireTime(shareInfo.expireTime) }}</p>
        </div>
      </div>

      <div class="file-info">
        <div class="file-icon">
          <svg viewBox="0 0 24 24" width="24" height="24" stroke="#4096ff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
            <polyline points="14 2 14 8 20 8"></polyline>
            <line x1="16" y1="13" x2="8" y2="13"></line>
            <line x1="16" y1="17" x2="8" y2="17"></line>
            <polyline points="10 9 9 9 8 9"></polyline>
          </svg>
        </div>
        <div class="file-name">{{ shareInfo.fileName }}</div>
          <div class="file-size">文件大小：{{ formatFileSize(shareInfo.size) }}</div>
      </div>

      <div class="code-form">
        <label for="extract-code" class="form-label">请输入提取码:</label>
        <input
          type="text"
          id="extract-code"
          v-model="extractCode"
          class="form-input"
          placeholder="请输入提取码"
        >
        <button @click="extractFile" class="extract-btn">提取文件</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getShareFileInfoService, downloadShareFileService } from '@/api/file.js';

const route = useRoute();
const shareId = route.params.id;
const shareInfo = ref({});
const extractCode = ref('');

// 格式化文件大小
const formatFileSize = (size) => {
  if (!size) return '';
  if (size < 1024) {
    return size + ' B';
  } else if (size < 1024 * 1024) {
    return (size / 1024).toFixed(2) + ' KB';
  } else if (size < 1024 * 1024 * 1024) {
    return (size / (1024 * 1024)).toFixed(2) + ' MB';
  } else {
    return (size / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
  }
};

// 格式化过期时间
const formatExpireTime = (time) => {
  if (!time) return '';
  const date = new Date(time);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
};

// 获取分享文件信息
const getShareInfo = async () => {
  try {
    const response = await getShareFileInfoService(shareId);
    shareInfo.value = response.data;
  } catch (error) {
    ElMessage.error('获取分享信息失败');
    console.error('获取分享信息失败:', error);
  }
};

// 提取文件
const extractFile = async () => {
  if (!extractCode.value.trim()) {
    ElMessage.warning('请输入提取码');
    return;
  }

  try {
    const dto = {
      id: shareId,
      code: extractCode.value
    };
    const response = await downloadShareFileService(dto);

    // 处理文件下载
    const blob = new Blob([response.data]);
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = shareInfo.value.fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);

    ElMessage.success('文件提取成功');
  } catch (error) {
    ElMessage.error('提取码错误或文件已过期');
    console.error('提取文件失败:', error);
  }
};

// 页面加载时获取分享信息
onMounted(() => {
  getShareInfo();
});
</script>

<style scoped>
.get-share-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.header {
  margin-bottom: 40px;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-image {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.logo-text {
  margin-left: 8px;
  font-size: 24px;
  font-weight: bold;
  color: #4096ff;
}

.share-card {
  width: 100%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.share-info {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #4096ff;
  color: #fff;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 16px;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.info-text {
  flex: 1;
}

.nickname {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.expire-time {
  font-size: 14px;
  opacity: 0.9;
}

.file-info {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.file-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f7ff;
  border-radius: 4px;
  margin-right: 16px;
}

.file-name {
  font-size: 16px;
  color: #333;
  word-break: break-all;
}

.file-size {
  font-size: 14px;
  color: #666;
  margin-left: 100px;
}

.code-form {
  padding: 20px;
}

.form-label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.form-input {
  width: 100%;
  height: 40px;
  padding: 0 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin-bottom: 20px;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #4096ff;
}

.extract-btn {
  width: 100%;
  height: 44px;
  background-color: #4096ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.extract-btn:hover {
  background-color: #3a8ee6;
}

.extract-btn:active {
  background-color: #3071a9;
}
</style>